<template>
  <div id="app">
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell is-link to="index" center class="userMessage">
      <div class="user">
        <img :src="user.url" alt="" />
        <div class="ringhtIns">
          <p>昵称：{{ user.username }}</p>
          <p>ID：{{ user.id }}</p>
        </div>
      </div>
    </van-cell>
    <van-cell-group>
      <van-cell title="我的收货地址" is-link @click="goAdress" />
      <van-cell title="账号与安全" is-link to="index" />
    </van-cell-group>

    <van-cell-group class="mid">
      <van-cell title="隐私" is-link to="index" />
      <van-cell title="通用" is-link to="index" />
    </van-cell-group>
    <van-cell-group class="mid">
      <van-cell title="帮助与反馈" is-link to="index" />
      <van-cell title="关于易购" is-link to="index" />
    </van-cell-group>
    <van-button type="info" size="large" class="onLogin" @click="onLogin"
      >登录</van-button
    >
    <van-button type="primary" size="large" class="outBtn" @click="outBtn"
      >退出登录</van-button
    >
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      user: {
        url: "https://ts1.cn.mm.bing.net/th/id/R-C.65a7cf49062527574b46dc6ba3edbb6a?rik=B6%2f9blOWJLCK1A&riu=http%3a%2f%2fpic43.photophoto.cn%2f20170506%2f0470102348231008_b.jpg&ehk=E2MSZL%2bfE%2bsf2JxuC8F4OaYE%2b6icJ8k6bKgwWQnPRV4%3d&risl=&pid=ImgRaw&r=0",
        username: "请登录",
        id: "0000",
      },
    };
  },
  created() {
    let newUser = this.$store.getters.user;
    if (newUser) {
      this.user = newUser;
    }
  },
  methods: {
    onClickLeft() {
      this.$router.replace({ path: "/mine" });
    },
    outBtn() {
      this.$store.dispatch("deleteUser");
      Toast.success("退出成功");
      setTimeout(() => {
        this.$router.replace({ path: "/login" });
      }, 1000);
    },
    onLogin() {
      this.$router.replace({ path: "/login" });
    },
    goAdress() {
      let user = this.$store.getters.user;
      if (user) {
        this.$router.push("/address");
      } else {
        this.$toast.fail("请登录");
      }
    },
  },
};
</script>

<style  scoped>
#app {
  background-color: #247, 248, 250;
}
.userMessage {
  margin-top: 0.3125rem;
}
.userMessage .user {
  display: flex;
}
.userMessage .user img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1rem;
}
.mid {
  margin-top: 0.625rem;
}
.outBtn {
  margin-top: 0.25rem;
}
.onLogin {
  margin-top: 1.25rem;
}
</style>